<template>
	<view >
		<view class="top">
			<p @click="todongxunlian()">返回</p>
		  <h3>模板编辑</h3>
		<p @click="baocun">保存</p>
		</view>
		<view class="muban-name">
			<input type="text" v-model="mobanList.mouldname"  />
			
		</view>
		<view class="center" style="border-radius: 30rpx;padding-bottom: 60rpx;">
		<!-- 	<view v-for="(item,index) in data" :key="index">
				
			</view> -->
				<view class="item" v-for="(item,index) in mobanList.groups" key="index" style=" ">
				<h2>{{item.name}}</h2>
				
				<view class="item-set" style="display: flex;flex-direction: row; " v-for="(item1,index1) in item.miniGroups " key="index1">
					<input class="inputorder" type="text" v-model="item1.order" style="" />
					<input class="inputkg" type="text" v-model="item1.weight" style="" />kg
					<input  class="inputnumb" type="text" v-model="item1.number" style="" />次
					
				</view>	
			<view class="item-btn">
					<el-button @click="addzu(index)">新增一组</el-button>
						<el-button>动作历史</el-button>
							<el-button>动作规则</el-button>
			</view>
							</view>
							</view>
					<uni-popup ref="popup" type="center">
		  <view class="pop">
		  <view class="pop-top">
			  <el-button @click="close()">返回</el-button>
		  	<input type="text" placeholder="请输入动作名" />
		  </view>		
		  <view class='center-list'>
		  <view class="pics">
		  <scroll-view class="gundong" scroll-y v-for="(item,index) in buweiList" :key="index">
	<view :class="{'active':isActive === index}" @click="checked(item.id)">
		  		  {{item.name}}
		  		</view>
		  	</scroll-view>
		  </view>
		  
		  </view>
			<view class="" style="margin-left: 150rpx; display: flex;flex-direction: column;  background-color: greenyellow;height: 900rpx;">
		
			<view v-for="(item1,index1) in dongzuoList" :key="index1">
				 {{item1.name}}
			</view>
			 
			</view>
		
		  </view>
		  
		</uni-popup>
		<view class="bottom">
			<view class="" style="background-color: aliceblue;" @click="open">
				添加动作
			</view>
			
			<view class="" style="background-color: aqua;">
				现在开始
			</view>
			<view class="" style="background-color: bisque;">
			退出
			
			</view>
		</view>
	</view>
</template>

<script>
	import { reactive,ref } from 'vue'
	export default {
		data() {
			return {
				addindex:0,
				isActive:0,
				mobanindex:0,
				buweiList:[],
				dongzuoList:reactive([]),
				qixieList:[],
				mobanList:reactive([]),
				exapleminiGroups:
						{
								number:'',
								id:'1',
								status:'2',
								restspan:'2',
								groupid:'2',
								order:'2',
								span:'2',
								weight:'',
							},
			}
		},
		onLoad(e) {
			// this.getdongzuo(),
			console.log(e.index)
			this.mobanindex=e.index
			this.getbuwei(),
			this.geiqixie(),
			this.getmoban()
			// this.getone()
			// this.checked(0)
		},
		methods: {
			test(){
				console.log(this.dongzuoList)
			},
			
			checked(index) {
				this.isActive = index-1
				this.getone(index)
			},
			getmoban(){
					  uni.request({
	      	url:'http://localhost:8080/mould/select',
							method:'POST',
							 data:{
							 id:1
								 },
					 header:{'content-type':'application/x-www-form-urlencoded'},
					 success: (res) => {
					 	console.log(res.data.data[this.mobanindex])
						this.mobanList=res.data.data[this.mobanindex]
						console.log(this.mobanList)
							 }
						  })
			},
			getbuwei(){
				uni.request({
					url:'http://localhost:8080/act/selallarea',
					success: (res) => {
						// console.log(res.data.data)
						this.buweiList=res.data.data
					}
				})
			},
			geiqixie(){
				uni.request({
					url:'http://localhost:8080/act/selallinstrument',
					success: (res) => {
						// console.log(res.data.data)
						this.qixieList=res.data.data
					}
				})
			},
			getone(areaid){
				
				
				uni.request({
					url:'http://localhost:8080/act/selactbycate',
					 method:'POST',
					data:{
						areaid:areaid,
						instrumentid:0
					},
					header:{'content-type':'application/x-www-form-urlencoded'},
					success: (res) =>{
							console.log(res.data.data);
								this.dongzuoList=res.data.data
								console.log(this.dongzuoList)
							
					     
						
				}})
		
			},
			addzu(index){
				// console.log(this.mobanList.groups[index].miniGroups.length)
				this.exapleminiGroups.order=this.mobanList.groups[index].miniGroups.length+1
				this.mobanList.groups[index].miniGroups[this.mobanList.groups[index].miniGroups.length]=this.exapleminiGroups
			
			},
			open(){
				this.$refs.popup.open()
			},
			close(){
				this.$refs.popup.close()
			},
			todongxunlian(){
		    uni.switchTab({
		    	url: '/pages/tabbar/xunlian/xunlian',
		    	
		    });
			console.log(111)
			},
			baocun(){
				uni.request({
					url:'http://localhost:8080/mould/update',
					method:'post',
					data:this.mobanList,
					header:{'content-type':'application/json'},
					success: (res) => {
						console.log(res.data)
						alert("保存成功")
						
						
					}
				})
			}
		}
	}
</script>

<style>
.top{
	display: flex;
	 flex-direction: row;
    justify-content: space-between;
}
.top p{
	font-size: 35rpx;
}
.top p:nth-child(3){
	color: aqua;
}
.muban-name{
	background-color: gray;
	height: 150rpx;
	/* line-height: 150rpx; */
	display: flex;
	align-items: center;
}
.muban-name input{
	
	font-size: 40rpx;
}
.bottom{
position: fixed;
bottom: 0;
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: space-evenly
}
.bottom view{
	flex:1;
	text-align: center;
	
}
	.center-list{
		width: 200rpx;
		height:86%;
		position: fixed;
		overflow: auto;
	}
	.pics {
		width:100%;
		height:auto;
	}
.pop{
	/* background-color: #e3ebcf; */
	
	height: 800rpx;
    width: 750rpx;
	
	/* display: flex; */
	background-color: white;
}
.pop-top{
	display: flex;
}
.pop-top input{
	background-color: pink;
	width: 350rpx;
	height: 75rpx;
	border-radius: 40rpx;
	
}
input::placeholder{
	color: black;
}
	.gundong {
	  width: 150rpx;
	  height: 100rpx;
	
	}
	.gundong view {
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	/*  background-color: #f1f1f1; */
	  font-size:28rpx;
	  color:#666;
	}
	.active {
		color:#333;
		font-weight:700;
		border-left:8rpx solid #ff5934;
	}
	.dongzuo{
		display: flex;
		flex-wrap: wrap;
		border-radius: 50rpx 50rpx 0 0;
		width: 750rpx;
		height: 900rpx;
		background-color: pink;
		
	}
	.item{
		/* width: 700rpx; */
	 background-color: #f5f5f5;
	  /* margin-left: 20rpx; */
	  margin: 20rpx auto;
	   /* margin-top: 25rpx; */
	   border-radius: 20rpx;
	}
	.item-set{
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
	.item-btn{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.inputorder{
		background-color: antiquewhite;
		 width: 100rpx;
		 height: 70rpx;
		 border-radius: 20rpx;
		 text-align: center;
	}	
	.inputkg{
		background-color: antiquewhite; width: 100rpx;
		height: 70rpx;
		margin-left: 50rpx;
		border-radius: 20rpx;
		text-align: center;
	}
	.inputnumb{
		background-color: antiquewhite; width: 100rpx;
		height: 70rpx; 
		margin-left: 50rpx;
		border-radius: 20rpx;
		text-align: center;
	}
</style>
